<template>
	<div class="row">
		<!-- Grid column -->
		<div class="col-md-9">
			<ul class="nav md-pills nav-justified pills-deep-orange" id="dateTab">
				<li class="nav-item" v-for="day in days" :key="day.day">
					<a :class="{'nav-link':true,'text-danger':day.isToday}" :href="'#'+day.dayOfYear" aria-selected="true">{{day.name}}</a>
				</li>

				<!-- <li class="nav-item">
					<a class="nav-link" href="#2" aria-selected="true">明天</a>
				</li>
				<li class="nav-item">
					<a class="nav-link active" href="#34" aria-selected="false">今天</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#panel12" role="tab" aria-selected="false">昨天</a>
				</li> -->
			</ul>
			<!-- Tab panels -->
			<div class="tab-content">
				<!-- Panel 1 -->
				<div class="tab-pane fade" id="panel4" role="tabpanel">
					<br />
					<p>对对对</p>
				</div>
				<div class="tab-pane fade in active show" id="panel11" role="tabpanel">
					<br />
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis
						molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit
						minima.
					</p>
				</div>
				<!-- Panel 1 -->
				<!-- Panel 2 -->
				<div class="tab-pane fade" id="panel12" role="tabpanel">
					<br />
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis
						molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit
						minima.
					</p>
				</div>
				<!-- Panel 2 -->
			</div>
		</div>
		<div class="col-md-3" >

            <!-- Conversation -->
            <div class=" overflow-auto" style="height:400px">

              <!-- My Message -->
              <div class="text-center"><small>16 July, 23:54</small></div>
              <div class="d-flex justify-content-end">
                <p class="primary-color rounded p-3 text-white w-75 ">Lorem ipsum dolor sit amet, consectetur
                  adipisicing elit. Molestiae modi exercitationem
                  dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
                  sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
              </div>

              <!-- Your Message -->
              <div class="text-center"><small>16 July, 23:55</small></div>
              <div class="d-flex justify-content-start media">
                <!-- Avatar -->
                <img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg">

                <p class="grey lighten-3 rounded p-3 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Molestiae modi exercitationem
                  dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
                  sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
              </div>

              <!-- Your Message -->
              <div class="text-center"><small>16 July, 23:56</small></div>
              <div class="d-flex justify-content-start media">
                <!-- Avatar -->
                <img class="mr-3 avatar-sm float-left" src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg">

                <p class="grey lighten-3 rounded p-3 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Molestiae modi exercitationem
                  dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
                  sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
              </div>

              <!-- My Message -->
              <div class="text-center"><small>16 July, 23:54</small></div>
              <div class="d-flex justify-content-end">
                <p class="primary-color rounded p-3 text-white w-75 ">Lorem ipsum dolor sit amet, consectetur
                  adipisicing elit. Molestiae modi exercitationem
                  dignissimos repellat, voluptas iure quod aliquid voluptatem perspiciatis quidem
                  sit eos, cum fugit voluptatibus quos laboriosam sed tenetur voluptate!</p>
              </div>
			</div>	
              <!-- New message -->
              <div class="row">

                <div class="col-md-12">

                  <div class="d-flex flex-row">

                    <div class="md-form chat-message-type">
                      <textarea type="text" id="form7" class="md-textarea form-control" rows="3"></textarea>
                    </div>

                    <div class="mt-5">
                      <a class="btn btn-primary btn-lg waves-effect waves-light">Send</a>
                    </div>

                  </div>

                </div>

              
              <!-- New message -->

            </div>
            <!-- Conversation -->
		</div>
		<!-- Grid column -->
	</div>
</template>
<script>
import moment from "moment";

var dayMap = {
	0:"周日",
	1:"周一",
	2:"周二",
	3:"周三",
	4:"周四",
	5:"周五",
	6:"周六",
}

export default {
	name: "Team",
	watch: {
		$route() {
			console.log("watch route:", this.$route);
		},
	},
	computed: {
		days() {
			var r = [];
			var m = moment();
			var dayOfYear = m.dayOfYear()
			var cur = dayOfYear
			var urlHash = this.$route.hash
			if(urlHash.length>1) {
				cur = urlHash.substring(1)*1
			}
			for (var i = cur + 1;i > cur - 6; i--) {
				let day = m.dayOfYear(i).day()
				let isToday = false
				let name = dayMap[day]
				if(i == dayOfYear) {
					name="今天"
					isToday = true
				}else if(i==dayOfYear+1) {
					name="明天"
				}else if(i == dayOfYear-1) {
					name ="昨天"
				}
				r.push({dayOfYear:i, day, name , isToday  });
			}
			return r;
		},
	},

	mounted() {
		var self = this;
		$("#dateTab a").on("click", function(e) {
			// e.preventDefault()

			console.log("click tab", self.$route);
			// $(this).tab('show')
		});
	},
};
</script>

<style scoped>
.avatar-sm{width:56px;border-radius:50%}
</style>